<template>
  <div>
    <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
      <h3 class="login_title">系统登录</h3>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="admin"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.passwordOrigin" placeholder="123456" ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code" class="captcha-form-item">
        <el-input
            style="font-size: 14px;"
            v-model="form.code"
            type="text"
            placeholder="输入验证码"
            maxlength="4"
            @keyup.enter.native="handleLogin">
        </el-input>
        <p v-loading="imageCodeLoading" class="refresh-code" @click="makeImageCode">
          <img :src="captchaRes.img" alt=""/>
        </p>
      </el-form-item>
      <el-form-item>
        <el-button @click="userLogin" style="margin-left: 105px;margin-top: 10px;" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {setToken} from '@/utils/auth'
import {getUserInfo, getCode, getKey, login} from "../../api/auth"

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        passwordOrigin: "",
        code: '',
        uuid: '',
        keyId: ''
      },
      publicKeyRes: {
        // 密钥ID
        keyId: "",
        // 密钥
        key: "",
      },
      captchaRes: {
        uuid: "",
        img: ""
      },
      rules: {
        username: [
          {required: true, trigger: 'blur', message: '请输入用户名'}
        ],
        passwordOrigin: [
          {required: true, trigger: 'blur', message: '请输入密码'}
        ],
        code: [
          {required: true, trigger: 'blur', message: '输入验证码'}
        ]
      },
      imageCodeLoading: "",


    };
  },
  methods: {
    // 登录
    userLogin() {
      // 校验通过
      this.$refs.form.validate((valid) => {
        if (valid) {
          var pwd = this.form.passwordOrigin;
          this.form.password = this.Rsa.encrypt(pwd, this.publicKeyRes.key)
          console.log("-----------")
          login(this.form).then((data) => {
            // this.form = {}
            console.log("--------登录失败")

            if (data.code === 200) {
              // token信息存入cookie用于不同页面间的通信
              setToken(data.data.token)
              this.$store.commit("LOGIN_IN", data.data);
              // 跳转到首页
              this.$router.push('/home')
              console.log("------登录成功")
            } else {
              this.$message.error(data.message);
              console.log("--------登录失败")
            }
          }).catch(e => {
            // this.form = {}
            console.log("---------catch")
            this.makeImageCode()
            this.getPasswordKey()
          })
        }
      })
    },
    handleLogin() {
      console.log('handleLogin')
    },
    queryCaptcha() {
      console.log('queryCaptcha')
    },
    makeImageCode() {
      getCode().then((res) => {
        if (res.code === 200) {
          this.captchaRes = res.data;
          this.captchaRes.img = "data:image/jpg;base64," + this.captchaRes.img;
          this.form.uuid = this.captchaRes.uuid;
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    getPasswordKey() {
      getKey().then((res) => {
        console.log("getkey=----------")
        if (res.code === 200) {
          this.publicKeyRes = res.data;
          this.form.keyId = this.publicKeyRes.keyId;
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  },
  mounted() {
    this.makeImageCode()
    this.getPasswordKey()
  }
};
</script>
<style lang="less" scoped>
.login-container {
  width: 400px;
  border: 1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  box-sizing: border-box;

  .login_title {
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }

  .el-input {
    width: 198px;
  }
}

.captcha-form-item {
  .captcha-form-item {
    .captcha-form-item-img {
      width: 60px;
      height: 38px;

      .codePic {
        object-fit: fill;
      }
    }
  }

}

// 图形验证码
.refresh-code {
  position: absolute;
  top: 1px;
  right: 2px;
  height: 38px;
  margin: 0;
  padding: 0;
  // 显示光标移动到指定的类型
  cursor: pointer;
  // user-select CSS 属性用于控制用户是否可以选择文本。这不会对作为浏览器用户界面（即 chrome）的一部分的内容加载产生任何影响，除非是在文本框中。
  user-select: none;

  img {
    width: 90px;
    height: 38px;
  }
}
</style>
